<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth">
            <Alert>
                <Form :model="searchObj" inline>
                    <FormItem>
                        <Input v-model="searchObj.name" class="search-input" clearable placeholder="请输入姓名"/>
                    </FormItem>
                    <FormItem>
                        <Input v-model="searchObj.card_no" class="search-input" clearable placeholder="请输入身份证号"/>
                    </FormItem>
                    <FormItem>
                        <Button class="search-btn" type="primary" @click="searchAction">
                            <Icon type="ios-search"/>
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Alert>
            <div>
                <vxe-toolbar export custom></vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        show-overflow
                        export-config
                        ref="xTable"
                        header-align="center"
                        align="center"
                        max-height="400"
                        :loading="tableLoading"
                        :data="tableData">
                    <vxe-table-column type="seq" width="100"></vxe-table-column>
                    <vxe-table-column field="name" title="姓名" algin></vxe-table-column>
                    <vxe-table-column field="card_no" title="身份证号"></vxe-table-column>
                    <vxe-table-column field="reason" title="理由"></vxe-table-column>
                    <vxe-table-column  title="类型">
                        <template v-slot="{ row }">
                            <div v-show="row.type == '1'">
                               绿码
                            </div>
                            <div v-show="row.type == '3'">黄码</div>
                            <div v-show="row.type == '4'">红码</div>
                        </template>
                    </vxe-table-column>
                </vxe-table>
            </div>
            <div slot="footer">
                <template v-if="modalType === 'info'">
                    <Button type="text" @click="cancelOption">关闭</Button>
                </template>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  getWhiteListRecordByID
} from '@/api/settings'
export default {
  name: 'optionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    },
    dataID: {
      type: String,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      modalShow: false,
      btnLoading: false,
      formItem: {},
      tableData: [],
      tableLoading: false,
      searchObj: {},
      orignalData: []
    }
  },
  methods: {
    searchAction () {
      this.tableData = this.orignalData
      if (this.searchObj.name && this.searchObj.card_no) {
        this.tableData = this.$common.xeUtils.filter(this.tableData, item => {
          return item.name.indexOf(this.searchObj.name) != -1 && item.card_no.indexOf(this.searchObj.card_no) != -1
        })
      } else if (this.searchObj.name) {
        this.tableData = this.$common.xeUtils.filter(this.tableData, item => { return item.name.indexOf(this.searchObj.name) != -1 })
      } else if (this.searchObj.card_no) {
        this.tableData = this.$common.xeUtils.filter(this.tableData, item => { return item.card_no.indexOf(this.searchObj.card_no) != -1 })
      } else {
        this.tableData = this.orignalData
      }
    },
    init (val) {
      this.tableLoading = true
      getWhiteListRecordByID({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = JSON.parse(data.data.data)
          this.orignalData = this.$common.xeUtils.clone(this.tableData, true)
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    modelAction () {
      this.modalShow = !this.modalShow
    },
    cancelOption () {
      this.modalShow = false
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
  },
  watch: {
    dataID (val) {
      // console.log(val, '子组件传来的数据')
      this.init(val)
    }
  },
  computed: {}
}
</script>

<style scoped>
    .code-area {
        padding: 20px;
        border-radius: 5px;
        overflow: scroll;
        background-color: #f0f0f0;
    }
    .table-style{
        width: 100%;
    }
   /* /deep/ .ivu-modal-header{
        border-bottom:none
    }*/
    /deep/ .ivu-modal-footer{
        border-top: none;
    }
</style>
